<template>
  <div style="width:1200px;margin:0 auto;">
    <!--轮播图    -->
    <el-carousel height="350px">
      <el-carousel-item v-for="item in bannerArr">
        <img :src="item.imgUrl" width="100%">
      </el-carousel-item>
    </el-carousel>

    <!--  烘焙食谱导航条  -->
    <el-row>
      <el-col :span="3">
        <p style="font-size: 30px;margin: 15px;">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0"  @select="selectLoadContents1" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item :index="arr.id.toString()"   v-for="(arr,i) in foodNavArr" :key="i" >
            {{arr.name}}
          </el-menu-item>

        </el-menu>
      </el-col>
    </el-row>

    <!-- 烘焙食谱列表   -->
    <el-row :gutter="10">
      <el-col :span="6" v-for="arr in foodArr"  >
        <el-card>
          <a href="javascript:void(0)" @click="detail(arr.id)" >
            <img :src="BASE_URL+arr.imgUrl" width="100%" height="145px">
            <p style="height:40px;">{{arr.title}}</p>
          </a>
          <el-row >
              <el-col :span="4">
                <el-avatar size="small" :src="BASE_URL+arr.userImgUrl" />
              </el-col>
            <el-col :span="10">
                  {{arr.nickname}}
            </el-col>
            <el-col :span="10">
              <span style="float: right;">{{arr.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!--  烘焙食谱点击加载更多  -->
    <div style="text-align: center">
      <el-button @click="listMore(1)">点击加载更多</el-button>
    </div>


    <!--  烘焙视频导航条  -->
    <el-row>
      <el-col :span="3">
        <p style="font-size: 30px;margin: 15px;">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" @select="selectLoadContents2" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item :index="arr.id.toString()"   v-for="(arr,i) in videoNavArr" :key="i" >
            {{arr.name}}
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!-- 烘焙视频列表   -->
    <el-row :gutter="10">
      <el-col :span="6" v-for="arr in videoArr"  >
        <el-card>
          <a href="javascript:void(0)" @click="detail(arr.id)" >
            <img :src="BASE_URL+arr.imgUrl" width="100%" height="145px">
            <p style="height:40px;">{{arr.title}}</p>
          </a>
          <el-row >
            <el-col :span="4">
              <el-avatar size="small" :src="BASE_URL+arr.userImgUrl" />
            </el-col>
            <el-col :span="10">
              {{arr.nickname}}
            </el-col>
            <el-col :span="10">
              <span style="float: right;">{{arr.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!--  烘焙视频点击加载更多  -->
    <div style="text-align: center">
      <el-button @click="listMore(5)">点击加载更多</el-button>
    </div>

    <!--  行业资讯导航条  -->
    <el-row>
      <el-col :span="3">
        <p style="font-size: 30px;margin: 15px;">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" @select="selectLoadContents3" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item :index="arr.id.toString()"   v-for="(arr,i) in messageNavArr" :key="i" >
            {{arr.name}}
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>


    <!-- 行业资讯列表   -->
    <el-row :gutter="10">
      <el-col :span="6" v-for="arr in messageArr"  >
        <el-card>
          <a href="javascript:void(0)" @click="detail(arr.id)" >
            <img :src="BASE_URL+arr.imgUrl" width="100%" height="145px">
            <p style="height:40px;">{{arr.title}}</p>
          </a>
          <el-row >
            <el-col :span="4">
              <el-avatar size="small" :src="BASE_URL+arr.userImgUrl" />
            </el-col>
            <el-col :span="10">
              {{arr.nickname}}
            </el-col>
            <el-col :span="10">
              <span style="float: right;">{{arr.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!--  行业资讯点击加载更多  -->
    <div style="text-align: center">
      <el-button @click="listMore(8)">点击加载更多</el-button>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerArr:[],
      recipeArr: [],
      foodArr:[],  /*食谱*/
      videoArr:[],/*视频*/
      messageArr:[]/*资讯*/,
      foodNavArr:[],
      videoNavArr:[],
      messageNavArr:[],
      user:localStorage.user ? JSON.parse(localStorage.user):null,
    }

  },
  methods: {
    listMore(type) {
        this.$router.push('/list?type='+ type)
    },
    //加载banners
    loadBanners(){
        let url = this.BASE_URL + '/v1/banners/selectAll'
        this.axios.get(url).then(
            res=>{
              if(res.data.code == 1){
                this.bannerArr = res.data.data
              }else{
                this.$message.error(res.data.msg)
              }
            }
        )
    },
    selectLoadContents1(key,keyPath){
      this.loadContents(1,key)

    },
    selectLoadContents2(key,keyPath){
      this.loadContents(5,key)

    },
    selectLoadContents3(key,keyPath){
      this.loadContents(8,key)

    },
    //加载内容contents
    loadContents(type,categoryId) {
      let url = this.BASE_URL + '/v1/contents/'+type +'/'+categoryId +'/index'
      this.axios.get(url).then(
          res=>{
            if(res.data.code == 1){
              switch (type){
                case 1://食谱
                      this.foodArr = res.data.data
                      break
                case 5://视频
                      this.videoArr = res.data.data
                      break
                case 8://资讯
                      this.messageArr = res.data.data
                      break
              }


            }else{
              this.$message.error(res.data.msg)
            }
          }
      )

    },
    loadNavSelect(type){
      //console.log(this.c.type)
      let url = `${this.BASE_URL}/v1/categories/${type}/getCategories`
      this.axios.get(url).then(
          res=>{
            if(res.data.code == 1){
              switch (type){
                case 1://食谱
                  this.foodNavArr = res.data.data
                  break
                case 5://视频
                  this.videoNavArr = res.data.data
                  break
                case 8://资讯
                  this.messageNavArr = res.data.data
                  break
              }
              this.categoriesArr = res.data.data
            }else{
              this.$message.error(res.data.msg)
            }
          }
      )
    },

    detail(id){
         //console.log(id)
      if(this.user == null){
        this.$router.push('/login')
        return
      }
      this.$router.push('/detail?id='+id)
    }
  },
  mounted() {
    //加载banner
       this.loadBanners()
    //加载导航条
      this.loadNavSelect(1)
      this.loadNavSelect(5)
      this.loadNavSelect(8)

    //加载内容
       this.loadContents(1,0)
       this.loadContents(5,0)
       this.loadContents(8,0)
  }
}
</script>

<style scoped>

</style>
